<template>
<div>
    <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">文章管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>文章添加</el-breadcrumb-item>
    </el-breadcrumb>
    <template>
        <el-card class="box-card"
             style="margin-top: 30px">
            <el-form ref="form" :model="postForm" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model.trim="postForm.title"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="postForm.type">
                        <el-radio :label="1">文章</el-radio>
                        <el-radio :label="2">视频</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="内容">
                    <VueEditor :config="config"
                               v-if="postForm.type===1" 
                               ref='myeditor'/>
                    <el-upload class="upload-demo"
                               action = 'http://157.122.54.189:9083/upload'
                               :headers ="init()"
                               v-else
                               :on-success="videoSubmit"
                               :before-upload="judge">
                        <el-button size="small" 
                                   type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="栏目">
                    <el-checkbox :indeterminate="isIndeterminate" 
                                 v-model="checkAll" 
                                 @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checkedCates" 
                                       @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="cate in cateList" 
                                 :label="cate" 
                                 :key="cate.id">{{cate.name}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="封面">
                    <el-upload action="http://157.122.54.189:9083/upload"
                               :headers ='init()'
                               list-type="picture-card"
                               :on-success="handlerPoster"
                               :on-remove="removeImg">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-button type="primary"
                           @click="publishArtical">发布文章</el-button>
            </el-form>
        </el-card>
    </template>
    
</div>
</template>

<script>
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css"
import { getCategory } from "../apis/artical";
import { addArtical } from "../apis/artical";
export default {
data () {
    return {
        postForm:{
            title:'',
            content:'',
            categories:[],
            cover:[],
            type: 1
        },
        config: {
      // 上传图片的配置
        uploadImage: {
            url: "http://157.122.54.189:9083/upload",
            name: "file",
            // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
            headers:{ Authorization: localStorage.getItem('heimaHoutai')},
            uploadSuccess(res, insert){
                //console.log(res);
                insert("http://157.122.54.189:9083" + res.data.data.url)
            }
        },
  	 
      // 上传视频的配置
        uploadVideo: {
            url: "http://157.122.54.189:9083/upload",
            name: "file",
            headers:{ Authorization: localStorage.getItem('heimaHoutai')},
            uploadSuccess(res, insert){
                //console.log(res);
                insert("http://157.122.54.189:9083" + res.data.data.url)
            }
        }
        },
        isIndeterminate:false,
        checkAll:false,
        cateList:[],
        checkedCates:false,
        checkedCates:[]
    }
},
mounted () {
    getCategory()
    .then(res => {
        //console.log(res);
        this.cateList = res.data.data
        this.cateList.splice(0,2)
        //console.log(this.cateList);
    })
},
methods: {
    handlerPoster(res){
        //console.log(res);
        this.postForm.cover.push({id:res.data.id})
        //console.log(this.postForm.cover);
    },
    publishArtical(){
        if (this.postForm.type === 1) {
        // 获取富文本框的内容
            this.postForm.content = this.$refs.myeditor.editor.root.innerHTML
            if(this.$refs.myeditor.editor.root.innerText.length == 0){
                this.$message.warning('内容不能为空');
                return
            };
        }
        this.postForm.categories = this.checkedCates.map(val => {
            return {id: val.id}
        })
        if (this.postForm.title == '' || this.postForm.categories.length == 0) {
            //console.log(1);
            this.$message.warning('请仔细检查所输入内容');
            return
        }
        console.log(this.postForm);
        addArtical(this.postForm)
        .then(res => {
            //console.log(res);
            this.$message.success(res.data.message)
        })
    },
    init(){
        let token = localStorage.getItem('heimaHoutai')
        return { Authorization:token }
    },
    videoSubmit(res){
        //console.log(res);
        this.postForm.content = res.data.url
        //console.log(this.postForm.content);
    },
    judge(file){
        //console.log(file);
        // let test = indexOf(file.type) 
        if(file.type.indexOf('video') !== -1){
            this.$message.success('文件格式正确')
        }else{
            this.$message.warning('文件格式错误')
            return false
        }
    },
    handleCheckAllChange(val) {
        //console.log(this.checkedCates);
        //console.log(this.cateList);
        this.checkedCates = val ? this.cateList : [];
        this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cateList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cateList.length;
        //console.log(this.checkedCates);
    },
    removeImg(res){
        //console.log(res);
        let id = res.response.data.id
        //console.log(id);
        this.postForm.cover = this.postForm.cover.filter(val => {
           return val.id !== id
        })
        //console.log(this.postForm.cover);
    }
},
components: {
  VueEditor
},

}
</script>

<style lang="less" scoped>

</style>